<template>
  <div style="display: flex;">
    <div class="questions">
      <div class="questions-left">
        <div class="questions-pages">
          <ul>
            <li
              v-for="item in questionsBarList.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )"
              :key="item.questionId"
            >
              <router-link
                :to="{
                  path: '/question-info',
                  query: { questionId: item.questionId },
                }"
              >
                <div class="ques">
                  <span class="question-logo"
                    ><p>{{ item.typeName }}</p></span
                  >
                  <p class="question-page">{{ item.questionTitle }}</p>
                  <!-- <span class="questions-number">1/94</span> -->
                  <span class="questions-image"
                    ><img :src="item.questionPhotoUrl"
                  /></span>
                  <span class="questions-time">{{
                    item.updateTime | formatDate
                  }}</span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="questions-pageover">
          <el-pagination
            background
            align="center"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="questionsBarList.lenght"
          >
          </el-pagination>
        </div>
      </div>
      <!-- <div class="questions-right">
        <div class="quesright-first">
          <div class="newword">
            <el-button class="newword-btn" @click="showPublish()"
              >发布问答</el-button
            >
          </div>
          <hr style="width: 100%; height: 1px; margin-top: 2%" />
          <img src="../../images/spring.png" />
          <img src="../../images/spring.png" />
          <img src="../../images/spring.png" />
          <img src="../../images/spring.png" />
        </div>
        <div class="quesright-second">
          <div class="hot-questions">
            <div class="hot-quest"></div>
            <p>热点问题</p>
          </div>
          <hr style="width: 100%; height: 1px; margin-top: 2%" />
          <div class="hot-passage">
            <ul>
              <li v-for="item in questionshotBarList" :key="item.questionId">
                <router-link
                  :to="{
                    path: '/question-info',
                    query: { questionId: item.questionId },
                  }"
                >
                  <i class="iconfont">&#xe626;</i>
                  <p>{{ item.questionTitle }}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div> -->
      <releaseNav  :isVisible="true"></releaseNav> 
    </div>
  </div>
</template>
<script>
// import "@/assets/js/question";
import "@/assets/css/questions.css";
import { getQuestionsList, getQuestionsHotList } from "@/api/questions";
import { formatDate } from "@/utils/date";
import releaseNav from "@/components/releaseNav.vue";

export default {
  name: "questions",
  data() {
    return {
      questionsBarList: [],
      questionshotBarList: [],
      currentPage: 1,
      pageSize: 15,
    };
  },
  components:{
    releaseNav
  },
  created() {
    this.getQuestionsListFun();
    this.getQuestionsHotListFun();
   
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getQuestionsListFun() {
      getQuestionsList().then((response) => {
        this.questionsBarList = response.data;
      });
    },
    getQuestionsHotListFun() {
      getQuestionsHotList().then((response) => {
        this.questionshotBarList = response.data;
      });
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    showPublish() {
      // 设置显示效果 默认是隐藏的
      var giveout = document.getElementById("giveout");
      // 删除隐藏
      giveout.classList.remove("giveout-none");
    },

    closePublish() {
      // 设置关闭效果
      // 设置隐藏效果
      var giveout = document.getElementById("giveout");
      // 删除隐藏
      giveout.classList.add("giveout-none");
    },
  },
  mounted() {},
};
</script>

<style></style>
